import * as THREE from "three";
import TWEEN from "tween";
import { getHexColor } from "../../../util/util";
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

// three部分的js对象不再是一个react对象，所以不需要继承react的PureComponent对象
export default class Application {
  /**
   * 构造函数
   */
  constructor(option) {
    this.canvas = option.canvas;
    this.container = new THREE.Object3D();
    this.geometry = new THREE.BufferGeometry();
    this.vertices = new Float32Array( [
      1,2,1,4,5,2
    ] );
    this.geometry.addAttribute(
      "position",
      new THREE.Float32BufferAttribute(this.vertices, 3)
    );
    this.geometry.computeBoundingSphere();
    this.opint = null;
    // var geometry = new THREE.BoxGeometry( 10, 10, 10 );
		// 	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
		// 	var cube = new THREE.Mesh( geometry, material );
    // this.container.add(cube);
  }
  // 创建图纸
  settuzhi = (threelist) => {
    // 清楚之前的对象
    if(this.opint){
      this.container.remove(this.opint);
    }
    console.log(CSS3DObject)
    var morecanvas = document.createElement('canvas');
    morecanvas.id = 'canvas_';
    morecanvas.width = 297;
    morecanvas.height = 210;
    morecanvas.style = "border:1px solid #d3d3d3;"
    morecanvas.getContext("2d").putImageData(threelist[1], 0, 0);
    var object = new CSS3DObject( morecanvas )
  this.container.add(object);

  }
  // 使用canvas创建纹理
  generateSprite = (imgdata) => {
    var canvas = document.createElement("canvas");
    canvas.width = 210;
    canvas.height = 297;
    var ctx = canvas.getContext("2d");
    ctx.putImageData(imgdata, 0, 0)
    return canvas;
  }
}
